<template>
  <div class="order">
    <van-nav-bar
        style="background-color: #15B3B2;"
    >
      <template #title>
        <span style="color: #FFFFFF">{{$t('我的订单')}}</span>
      </template>
    </van-nav-bar>

    <div class="wrapper">
      <div class="order_tabs">
        <div class="order_tabs_item" @click="changeTabsOrder(1)" :class="{'order_tabs_item_active':orderActive===1}">
          <span style="font-weight: 600">{{ $t('待还款') }}</span>
        </div>
        <div class="order_tabs_item" @click="changeTabsOrder(2)" :class="{'order_tabs_item_active':orderActive===2}">
          <span style="font-weight: 600">{{ $t('待审核') }}</span>
        </div>
      </div>
      <div style="padding: 15px" v-if="orderList.length !== 0">
        <div class="card_box" v-for="item in orderList" :key="item.loanRecordId"
             :class="{'order_bg':[6,8,9].indexOf(item.approvalResult) !== -1}"
        >
          <div class="card_header">
            <span>
              <img :src="item.productLogo" class="product_logo">
            <span style="font-size: 20px;vertical-align: middle">{{ item.appName }}</span>
            </span>
            <div class="details" @click="handleClick(item)">
              <span>{{ $t('详情') }}</span>
              <van-icon style="vertical-align: middle" name="arrow"/>
            </div>
          </div>
          <div class="card_body">
            <div class="order_info">
              <div class="order_value_text">
                <div >{{ $t('借款金额') }}</div>
                <div class="amount_text" ><span>₱</span>{{ item.loanAmount }}</div>
              </div>
              <div class="order_value_text">
                <div >{{ $t('借款时间') }}</div>
                <div>{{ $dateFormat(new Date(item.loanTime),'dd/mm/YYYY HH:MM:SS') }}</div>
              </div>
              <div class="order_value_text" v-show="item.refundDate">
                <div >{{ $t('还款时间') }}</div>
                <div>{{ $dateFormat(new Date(item.refundDate),'dd/mm/YYYY') }}</div>
              </div>
            </div>
            <div style="text-align: right;padding-top: 10px" v-show="item.approvalResult === 6 || item.approvalResult === 8">
              <van-button @click="handleExtend(item)" class="extend_btn"
                          v-show="item.isRoll === 1"
                          round
                          type="primary">{{ $t('展期') }}
              </van-button>
              <van-button class="repay_btn" type="primary"
                          round
                          @click="handleRepayment(item)">{{
                  $t('还款')
                }}
              </van-button>
            </div>
          </div>
        </div>

      </div>
      <div class="no_content" v-else>
        <img class="image" src=".././../assets/my/is_null.png">
      </div>
    </div>

  </div>
</template>

<script>
import { onMounted, ref} from 'vue'
import router from "@/router";
import {fetchMyLoanRecord} from '@/api/order'
import {useStore} from "vuex";
import {formatMoney, dateFormat} from "@/utils/tool";

export default {
  setup() {
    const loanOrderList = ref([])
    const store = useStore()
    const orderList = ref([])
    const orderActive = ref(1)
    const userId = localStorage.getItem('userId')
    const handleClick = async ({loanRecordId, isRoll}) => {
      router.push({
        path: '/ERlAaAFWeQ',
        query: {
          loanRecordId: loanRecordId,
          isRoll: isRoll
        }
      })
    }
    //(-1订单关闭,0,待审核1,审核中,2,拒绝,5,待放款,6待还款,8,逾期,9结清)
    const fetchLoanOrder = async () => {
      const res = await fetchMyLoanRecord({type: 0})
      if (res.code === 1) {
        loanOrderList.value = res.data.map(item => {
          if (item.refundDate) {
            item.refundDate = dateFormat(new Date(item.refundDate), 'YYYY-mm-dd')
          }
          return item
        })
        // 优先展示还款订单
        const active = loanOrderList.value.some(item => {
          return item.approvalResult === 6 || item.approvalResult === 8
        })
        orderActive.value = active ? 1 : 2
        changeTabsOrder(active ? 1 : 2)
      }
      store.dispatch('changeLoading', false)
    }
    onMounted(() => {
      if (userId) {
        fetchLoanOrder()
      }
    })
    // 格式化金额
    const formatterMoney = (value) => {
      if (value) {
        return formatMoney(value)
      } else {
        return value
      }
    }

    function changeTabsOrder(value) {
      orderActive.value = value
      if (value === 1) {
        // 待还款
        orderList.value = loanOrderList.value.filter(item => {
          return [6, 8].indexOf(item.approvalResult) !== -1
        })
      } else {
        // 待审核
        orderList.value = loanOrderList.value.filter(item => {
          return [0, 1, 5].indexOf(item.approvalResult) !== -1
        })
      }
    }

    function handleExtend(params) {
      router.push({
        path: '/AAHdUmpZXl',
        query: {
          loanRecordId: params.loanRecordId,
          appName: params.appName,
          type: 'extend'
        }
      })
    }

    function handleRepayment(params) {
      router.push({
        path: '/JkGQsgTJyZ',
        query: {
          loanRecordId: params.loanRecordId,
          appName: params.appName,
          type: 'repay'
        }
      })
    }

    return {
      handleRepayment,
      handleExtend,
      orderList,
      loanOrderList,
      handleClick,
      orderActive,
      formatterMoney,
      changeTabsOrder
    }
  }
}
</script>

<style lang="less" scoped>
.order {
  width: 100%;
  box-sizing: border-box;

  .wrapper {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 80px;
    background-color: #F7F7F7;
    border-radius: 10px;
    margin-top: -10px;
    position: relative;
    z-index: 10;
    .order_tabs {
      padding: 20px 10px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 10px;

      .order_tabs_item {
        border-radius: 4px;
        padding: 8px 10px;
        color: #666666;
        font-size: 16px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
      }

      .order_tabs_item_active {
        color: #15B3B2;
        border-radius: 25px;
        background-color: #BBF0F0;
      }
    }


    .card_box {
      width: 100%;
      position: relative;
      box-sizing: border-box;
      font-size: 14px;
      margin-bottom: 15px;
      background-size: 100% 100%;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      border-radius: 8px;

      .extend_btn {
        background-color: transparent;
        color: #15B3B2;
        border: 1px solid #15B3B2;
        margin-right: 20px;
        padding: 0 20px;
        position: relative;
      }

      .repay_btn {
        width: 130px;
      }

      .card_header {
        padding: 15px;
        position: relative;
        font-size: 22px;
        border-bottom: 1px solid #E1E1E1;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px 10px 0 0;
        overflow: hidden ;
        background-image: url("../../assets/order/order_header_pane.png");
        background-size: 100% 100%;

        .product_logo {
          height: 36px;
          width: 36px;
          vertical-align: middle;
          margin-right: 10px;
          border-radius: 50%;
        }

        .details {
          font-weight: 400;
          font-size: 16px;
          vertical-align: middle;
        }
      }

      .card_body {
        overflow: hidden;
        font-size: 14px;
        padding: 15px;
        border-radius: 0 0 10px 10px;
        background-color: #F3FCFF;
        position: relative;
        .order_item_icon{
          position: absolute;

        }
        .order_icon {
          position: absolute;
          left: 0px;
          bottom: 10px;
          height: 150px;
          width: 100px;
        }

          .product_info {
            padding: 10px 0;

            .logo {
              height: 26px;
              width: 26px;
              margin-right: 5px;
              vertical-align: middle;
            }
          }

        .order_info {
          font-size: 16px;
          text-align: left;
          z-index: 10;
          position: relative;
          .order_value_text {
            display: flex;
            align-items: center;
            padding: 5px 0;
            justify-content: space-between;
            .amount_text{
              color: #FAC816;
              font-size: 18px;
            }
          }
        }
      }
    }
  }

  .text_box {
    font-size: 12px;
    color: #828282;
  }

  .no_content {
    margin-top: 50px;
    text-align: center;

    .image {
      width: 300px;
      height: 230px;
      z-index: 99;
    }

    .loan_not {
      color: #BBBCBC;
      font-size: 13px;
    }

  }
}


</style>
